<template>
  <div class="blog-detail" @click="goBlogDetail">
      <a-card :title="title" style="width: 100%;text-align:center;">
      <a slot="extra" href="#">{{way}}</a>
      <div style="text-align:left;margin-bottom:16px;text-indent:2em">
          <span>
              {{innerText}}
          </span>
      </div>
      <div class="footer">
          <!-- <div class="left">
              <span>点赞：12</span>
              <span>评论：12</span>
              <span>收藏：12</span>
          </div> -->
          <div class="right">
              <span>{{realname}}</span>
              <span>{{format}}</span>
          </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import {formatTime} from "../../formatTime"
export default {
    props: [
    "title",
    "time",
    "img",
    "content",
    "seeNum",
    "way",
    "id",
    "index",
    "username",
    "realname"
  ],
  computed: {
    format() {
      return formatTime(this.time);
    },
    innerText(){
      let div = document.createElement("div")
      div.innerHTML = this.content
      return div.innerText
    },
  },
    methods: {
        goBlogDetail(){
            this.$router.push("/blogRead/"+this.id)
        }
    },
}
</script>

<style scoped lang="less">
.blog-detail{
    margin: 50px;
    text-align: left;
    a{
        margin:0 16px;
    }
    .footer{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        font-size: 12px;
        opacity: 0.8;
        span{
            margin: 0 8px;
            
        }
    }
}

</style>